import { Button, Carousel, Tag } from 'antd'
import React from 'react'
import styled from '../index.module.scss'

const AnnouncementConfig = [
  {
    id: 1,
    title: 'Craft Dashboard Launch',
    content: 'To start a blog, think of a topic about and first brainstorm ways to write details',
    footer: {
      left: 'DEC 03, 20',
      right: 'Upgrade Plan',
    },
  },
  {
    id: 1,
    title: 'Craft Dashboard Launch',
    content: 'To start a blog, think of a topic about and first brainstorm ways to write details',
    footer: {
      left: 'DEC 03, 20',
      right: 'Upgrade Plan',
    },
  },
  {
    id: 1,
    title: 'Craft Dashboard Launch',
    content: 'To start a blog, think of a topic about and first brainstorm ways to write details',
    footer: {
      left: 'DEC 03, 20',
      right: 'Upgrade Plan',
    },
  },
  {
    id: 1,
    title: 'Craft Dashboard Launch',
    content: 'To start a blog, think of a topic about and first brainstorm ways to write details',
    footer: {
      left: 'DEC 03, 20',
      right: 'Upgrade Plan',
    },
  },
]

const Announcements = () => {
  return (
    <div style={{ padding: '1rem 1rem' }}>
      <h2
        style={{
          fontSize: '1.25rem',
          fontWeight: 700,
          color: '#b5b5c3',
          padding: '.5rem',
          marginBottom: 20,
        }}
      >
        Announcements
      </h2>
      <Carousel autoplay dotPosition='top' className={styled.carousalStyle}>
        {AnnouncementConfig.map((config) => {
          return (
            <div key={config.id}>
              <div style={{ display: 'flex', flexDirection: 'column', marginTop: 20 }}>
                <span className={styled.titleh3} style={{ marginBottom: 10 }}>
                  {config.title}
                </span>
                <span className={styled.headerContent}>{config.content}</span>
                <div
                  style={{
                    marginTop: 21,
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: '7px 20px',
                  }}
                >
                  <Tag color='blue' style={{ borderRadius: 4 }}>
                    {config.footer.left}
                  </Tag>
                  <Button shape='round'>{config.footer.right}</Button>
                </div>
              </div>
            </div>
          )
        })}
      </Carousel>
    </div>
  )
}

export default Announcements
